<template>
    <div>
        <div class="m-search">
            <div class="s-head">
                <span class="h-img">
                    <img src="../../../../static/images/Search.png" alt="">
                    查询
                </span>
            </div>
            <div class="s-from">
                <form action="">
                    <div class="f-cell">
                        <div class="cell-title">政策标题:</div>
                        <div class="cell-input"><input type="text" placeholder="请输入政策标题"></div>
                    </div>
                    <div class="f-cell">
                        <div class="cell-title">政策类别:</div>
                        <div class="cell-input">
                            <select name="" id="" >
                                <option value="">--请选择--</option>
                            </select>
                        </div>
                    </div>
                    <div class="f-cell">
                        <div class="cell-title">政策范围:</div>
                        <div class="cell-input">
                            <select name="" id="" >
                                <option value="">--请选择--</option>
                            </select>
                        </div>
                    </div>
                    <div class="f-cell">
                        <div class="cell-title">政策满足情况:</div>
                        <div class="cell-input">
                            <select name="" id="" >
                                <option value="">--请选择--</option>
                            </select>
                        </div>
                    </div>

                    <div class="from-buttom">
                        <button class="bule"><img src="../../../../static/images/search2.png" alt="">查询</button>
                        <button class="orange"><img src="../../../../static/images/clear.png" alt="">清除</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="m-search">
            <div class="s-head">
                <span class="h-img">
                    <img src="../../../../static/images/solve.png" alt="">
                    查询结果
                </span>
            </div>
            <div class="s-table">
                <div class="t-cell title">
                    <div class="cell-item">政策标题</div>
                    <div class="cell-item">政策类别</div>
                    <div class="cell-item">政策范围</div>
                    <div class="cell-item">政策符合情况</div>
                    <div class="cell-item">发布时间</div>
                    <div class="cell-item">操作</div>
                </div>
                <div class="t-cell" v-for="(item,index) in tableData" :key="index">
                    <div class="cell-item">{{item.text}}</div>
                    <div class="cell-item">{{item.type}}</div>
                    <div class="cell-item">{{item.garden}}</div>
                    <div class="cell-item">{{item.accord}}</div>
                    <div class="cell-item">{{item.time}}</div>
                    <div class="cell-item"><span>详细</span> </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            tableData:[
                {
                    text:'火炬平台优秀学术/技术带 头人计划项目',
                    type:'科技类',
                    garden:'国家级',
                    accord:'部分符合',
                    time:'2019-04-03 13：00',
                },
                {
                    text:'火炬平台优秀学术/技术带 头人计划项目',
                    type:'科技类',
                    garden:'国家级',
                    accord:'部分符合',
                    time:'2019-04-03 13：00',
                },
                {
                    text:'火炬平台优秀学术/技术带 头人计划项目',
                    type:'科技类',
                    garden:'国家级',
                    accord:'部分符合',
                    time:'2019-04-03 13：00',
                },
                {
                    text:'火炬平台优秀学术/技术带 头人计划项目',
                    type:'科技类',
                    garden:'国家级',
                    accord:'部分符合',
                    time:'2019-04-03 13：00',
                },
            ]
        }
    },
    methods:{
        onSubmit() {
            console.log('submit!');
        }
    }
}
</script>
<style lang="less" scoped>
    .m-search{
        background: #fff;
        border: 1px solid #CCCCCC;
        color: #333;
        margin-top: 50px;
        .s-head{
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #CCCCCC;
            padding-left: 20px;
            font-size: 20px;
            &>span{
                display: inline-block;
                &.h-img{
                    height: 21px;
                    img{
                        height: 100%;
                        margin-right: 10px;
                    }
                }
            }
        }
        .s-from{
            padding: 30px 40px;
            .f-cell{
                display: inline-block;
                width: 30%;
                margin-right: 3%;
                font-size: 18px;
                color: #333;
                margin-bottom: 30px;
                .cell-title{
                    
                }
                .cell-input{
                    width: 100%;
                    margin-top: 10px;
                    
                    input,select{
                        width: 100%;
                        height: 44px;
                        line-height: 44px;
                        text-indent: 1em;
                        border-radius: 4px;
                        border: 1px solid #CCCCCC;
                        color: #666666;
                        option{
                            text-indent: 1em;
                        }
                    }
                }
            }
            .from-buttom{
                text-align: center;
                button{
                    width:98px;
                    height:36px;
                    
                    border-radius:4px;
                    border: none;
                    text-align: center;
                    font-size: 16px;
                    color: #fff;
                    &.bule{
                        background:linear-gradient(0deg,rgba(2,98,255,1) 0%,rgba(73,206,255,1) 100%);
                        margin-right: 20px;
                    }
                    &.orange{
                        background:#CE5606
                    }
                    img{
                        height: 20px;
                    }
                }
            }
        }
        .s-table{
            .t-cell{
                height: 70px;
                display: flex;
                font-size: 14px;
                color: #333;
                align-items: center;
                padding: 0 20px;
                &.title{
                    font-size: 18px;
                }
                &:nth-child(2n){
                    background:#EBF9FF;
                }
                .cell-item{
                    flex: 1;
                    text-align: center;
                    &>span{
                        padding: 2px 10px;
                        background: #0869FF;
                        color:#fff;
                        border-radius: 3px;
                    }
                }
            }
        }
    }
</style>
